<template>
    <ScrollView class="aboutPage">
        <div>
            <div>
                <div>
                    <img src="../assets/imgs/user.jpg" alt />
                </div>
                <div>
                    <p>{{userName}}</p>
                    <div>
                        <span>我的收获地址</span>
                        <span class="iconfont icon-right"></span>
                    </div>
                </div>
            </div>
            <div class="MyOrder">
                <div>
                    <img src="../assets/imgs/My/order.png" alt />
                </div>
                <div>我的订单</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="MyAll">
                <div>
                    <img src="../assets/imgs/My/shoppingCart.png" alt />
                </div>
                <div>我的购物车</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="MyAll">
                <div>
                    <img src="../assets/imgs/My/pieceTogether.png" alt />
                </div>
                <div>我的拼团</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="MyAll">
                <div>
                    <img src="../assets/imgs/My/wallet.png" alt />
                </div>
                <div>我的钱包</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="MyAll">
                <div>
                    <img src="../assets/imgs/My/discountCoupon.png" alt />
                </div>
                <div>我的优惠券</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="MyAll">
                <div>
                    <img src="../assets/imgs/My/collect.png" alt />
                </div>
                <div>我收藏的商品</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="MyAll">
                <div>
                    <img src="../assets/imgs/My/shop.png" alt />
                </div>
                <div>我收藏的店铺</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="message">
                <div>
                    <img src="../assets/imgs/My/message.png" alt />
                </div>
                <div>消息通知</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="service">
                <div>
                    <img src="../assets/imgs/My/service.png" alt />
                </div>
                <div>客服</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="service">
                <div>
                    <img src="../assets/imgs/My/feedback.png" alt />
                </div>
                <div>意见反馈</div>
                <div>
                    <span class="iconfont icon-right"></span>
                </div>
            </div>
            <div class="quit">
                <button @click="quit()">退出登录</button>
            </div>
        </div>
    </ScrollView>
</template>

<script>
export default {
    data() {
        return {
            userName: ""
        };
    },
    methods: {
        quit() {
            localStorage.clear();
            this.$store.commit("resetCartItem",{});
            this.$router.push("/");
            this.$showTip("已退出登录");
        }
    },
    mounted() {
        this.userName = localStorage.getItem("token");
    }
    // beforeRouteEnter (to, from, next) {
    //     console.log("about-enter",to,from);
    //     next();
    // },
    // beforeRouteLeave (to, from, next) {
    //     console.log("about-leave",to,from);
    //     next();
    // }
    //因为有可能不止一个页面需要强制登录，所以将下面的方法定义到全局守卫
    // beforeRouteEnter (to, from, next) {
    //     let token = localStorage.getItem("token");
    //     //如果登录了就跳到about页面
    //     if(token){
    //         next();
    //     //如果没登录就跳到login页面
    //     }else{
    //         window.$showTip("请先登录",2);
    //         setTimeout(()=>{
    //             next({
    //                 name:"login",
    //                 params:{
    //                     url:to.fullPath
    //                 }
    //             });
    //         },1000);
    //     }
    // }
};
</script>

<style lang="less" scoped>
.My {
    height: @h;
    background-color: @white;
    &::after {
        content: "";
        display: block;
        clear: both;
    }
    div:nth-child(1) {
        width: 16%;
        height: 100%;
        float: left;
        text-align: center;
        img {
            width: 47%;
            height: 100%;
            object-fit: contain;
        }
    }
    div:nth-child(2) {
        height: 100%;
        float: left;
        line-height: @h;
        font-size: 30px;
        font-weight: bold;
    }
    div:nth-child(3) {
        float: right;
        height: @h;
        span {
            color: @99;
            line-height: @h;
            font-size: 25px;
            margin-right: 30px;
        }
    }
}
.aboutPage {
    width: 100vw;
    background-color: @ef;
    position: absolute;
    top: 0;
    bottom: @h;
    > div {
        > div:first-child {
            height: 180px;
            display: flex;
            flex-flow: row nowrap;
            background-color: @white;
            div:first-child {
                flex-grow: 0.8;
                text-align: center;
                box-sizing: border-box;
                padding: (180px - 100px)/2 0;
                img {
                    width: 100px;
                    height: 100px;
                    border-radius: 50px;
                }
            }
            div:last-child {
                flex-grow: 3;
                p {
                    font-size: 37px;
                    font-weight: bold;
                    height: 50%;
                    line-height: 3.6;
                }
                div {
                    height: 50%;
                    span:first-child {
                        color: @gray;
                        font-size: 25px;
                    }
                    span:last-child {
                        color: @99;
                        font-size: 25px;
                        position: relative;
                        left: 100px;
                    }
                }
            }
        }
        .MyOrder {
            &:extend(.My all);
            margin: 30px 0;
        }
        .MyAll {
            &:extend(.My all);
            border-bottom: 1px solid @ef;
        }
        .message {
            &:extend(.My all);
            margin-top: 30px;
        }
        .service {
            &:extend(.My all);
            border-bottom: 1px solid @ef;
        }
        .quit {
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            button {
                width: 90%;
                height: 60%;
                border-radius: 10px;
                border: none;
                background-color: @pink;
                color: @white;
                font-size: 33px;
            }
        }
    }
}
</style>